<template>
	<div class="share-page">
		<el-breadcrumb separator=">">
			<el-breadcrumb-item>设备管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/record' }">线路分组</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="circult-content">
			<div class="left">
				<div class="title">
					线路列表
				</div>
				<div class="circuit">
					<div class="circuit-title">
						全部
					</div>
					<el-scrollbar height="640px">
						<div class="circuit-item" v-for="(item,index) in circuitList"
							:class="circuitIndex == item.index ? 'activity-circuit' : ''" @click="cutCircuit(item)"
							:key="index">
							线路{{item.index}}
						</div>
					</el-scrollbar>
					<div class="circuit-add" @click="addCircuit">
						+新增线路
					</div>
				</div>
			</div>
			<div class="right">
				<div class="top-tabs">
					<div v-for="item in tabsList" :key="item.index"
						:class="activeIndex === item.index ? 'activity-item' : ''" class="tabs-item"
						@click="cutTabs(item)">
						{{item.name}}
					</div>
				</div>
				<div class="tables">
					<el-table :data="deviceData" style="width: 100%">
						<el-table-column prop="name" label="设备名称" />
						<el-table-column prop="imei" label="设备IMEI号" />
						<el-table-column prop="number" label="生产编号" />
						<el-table-column prop="person" label="补货员" />
						<el-table-column prop="tell" label="联系方式" />
						<el-table-column prop="circuit" label="线路分组" />
					</el-table>
				</div>
				<div class="page">
					<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :size="size"
						:disabled="disabled"  layout="prev, pager, next, jumper,total"
						:total="10" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ComponentSize } from "element-plus";
	import { ref } from "vue";
	interface circuitList {
		index : string;
	}
	interface tabsList {
		name : string;
		index : string;
	}
	const circuitIndex = ref("1");
	const activeIndex = ref("1");
	const currentPage = ref(1);
	const pageSize = ref(1);
	const size = ref<ComponentSize>('small');
	const disabled = ref(false);
	const tabsList = ref<tabsList[]>([
		{
			name: '零柜售',
			index: '1'
		},
		{
			name: '提货柜',
			index: '2'
		}
	])
	const deviceData = [
		{
			name: '伯克材料3668649',
			imei: '8698254043668649',
			number: '20965784567',
			person: '小郑',
			tell: '188456784567',
			circuit: '线路1',
		},
		{
			name: '伯克材料3668649',
			imei: '8698254043668649',
			number: '20965784567',
			person: '小郑',
			tell: '188456784567',
			circuit: '线路1',
		}
	]
	const circuitList = ref([
		{ index: '1' },
		{ index: '2' },
		{ index: '3' },
		{ index: '4' },
		{ index: '5' },
		{ index: '6' },
		{ index: '7' },
		{ index: '8' },
		{ index: '9' },
		{ index: '10' },
		{ index: '11' },
		{ index: '12' },
		{ index: '13' },
		{ index: '14' },
		{ index: '15' },
		{ index: '16' },
	]);
	const handleSizeChange = (val : number) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val : number) => {
		console.log(`current page: ${val}`)
	}
	const cutCircuit = (circuitItem : circuitList) => {
		circuitIndex.value = circuitItem.index;
	};
	const addCircuit = () => {
		// 假设我们想要添加一个新的电路，其索引为当前列表的最大索引加1
		const lastIndex = circuitList.value.length > 0 ? Math.max(...circuitList.value.map(circuit => parseInt(circuit.index, 10))) : 0;
		const newIndex = (lastIndex + 1).toString(); // 将数字转换为字符串
		circuitList.value.push({ index: newIndex }); // 添加新电路到列表中
	};
	const cutTabs = (tabItem : tabsList) => {
		activeIndex.value = tabItem.index;
	};
</script>

<style lang="scss" scoped>
	.circult-content {
		background-color: #f0f0f0;
		margin-top: 20px;
		padding: 10px 10px 0px 10px;
		display: flex;
		justify-content: space-between;

		.left {
			background-color: #fff;
			width: 30.5%;

			.title {
				font-size: 14px;
				padding: 10px;
			}

			.circuit {
				font-size: 14px;
				text-align: center;

				.circuit-title {
					border-top: 1px solid #ececec;
					padding: 10px;
				}

				.circuit-item {
					border-top: 1px solid #ececec;
					padding: 10px;
					cursor: pointer;
				}

				.activity-circuit {
					background-color: #f0a93e;
					color: #fff;
				}

				.circuit-add {
					padding: 10px;
					color: #fff;
					background-color: #0071bb;
					cursor: pointer;
				}
			}
		}

		.right {
			width: 69%;
			background-color: #fff;
			padding: 10px;

			.top-tabs {
				text-align: center;
				display: flex;
				font-weight: bold;
				font-size: 14px;
				margin-top: 30px;

				.tabs-item {
					width: 150px;
					padding: 5px;
					background-color: #fff;
					border: 1px solid #d2d2d2;
					border-radius: 20px;
					margin-right: 15px;
				}

				.activity-item {
					background-color: #f0a93e;
					border: 1px solid #f0a93e;
					color: #fff;
				}

				.tabs-item:hover {
					cursor: pointer;
				}
			}

			.tables {
				margin-top: 10px;
			}
			.page {
				display: flex;
				justify-content: center;
				background-color: #fff;
				padding: 5px 0;
			}
			
		}
		
	}
</style>